import React, { useEffect,useState } from 'react'
import './bkz.css'
import { PlusCircleOutlined,DownloadOutlined } from '@ant-design/icons';
import { Button,Input,Select,Pagination } from 'antd';
import {getList} from '../request/instance'
const App = function () {
    let [teacher,setteacher]=useState([])
    let [clas,setclas]=useState([])
    let [discipline,setdiscipline]=useState([])
    let [grade,setgrade]=useState([])
    useEffect(() => {
        
        getList().then((ren)=>{
            let a=[]
            let b=[]
            let c=[]
            let d=[]
            ren.data.teacher.forEach(i => {
                a.push({'value':i.name,'label':i.name})
            });
            ren.data.clas.forEach(i => {
                b.push({'value':i.class,'label':i.class})
            });
            ren.data.discipline.forEach(i => {
                c.push({'value':i.discipline,'label':i.discipline})
            });
            ren.data.grade.forEach(i => {
                d.push({'value':i.grade,'label':i.grade})
            });
            setteacher(a)
            setclas(b)
            setdiscipline(c)
            setgrade(d)
        })
    }, [])
    return <>
        <div className='main'>
            <div className='top'>
                <div>
                    <span>备课组名称 <Input style={{width:'200px'}} placeholder="输入备课组名称" /></span>
                    <span>备课组组长 <Input style={{width:'200px'}} placeholder="输入备课组组长" /></span>
                    <span>学科 <Select style={{width:'200px'}}
                        placeholder=""
                        options={teacher}
                    /></span>
                    <span>年级 <Select style={{width:'200px'}}
                        placeholder=""
                        options={clas}
                    /></span>
                </div>
                <hr style={{width:'98%',color:'rgb(237, 237, 237)'}}/>
                <div className='button'>
                    <Button type="primary">查询</Button> 
                    <Button color="primary" variant="outlined">重置</Button>
                </div>
            </div>
            <div className='box'>
                <div className='box_div1'>
                    <Button type="link" icon={<DownloadOutlined />}>导出</Button>
                    <Button type="link" icon={<PlusCircleOutlined />}>新增备课组</Button>
                </div>
                <div className='box_div2'>
                <table width='1100px' border='1px' cellPadding='5' cellSpacing='0'>
                    <thead>
                        <tr>
                            <td>序号</td>
                            <td>备课名称</td>
                            <td>备课组组长</td>
                            <td>年级</td>
                            <td>学科</td>
                            <td>人数</td>
                            <td>责任描述</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>一年级语文备课组</td>
                            <td>王晓宇</td>
                            <td>一年级</td>
                            <td>语文</td>
                            <td>6</td>
                            <td>责任描述</td>
                            <td>
                                <Button type="link">编辑</Button>
                                <Button type="link">查看</Button>
                                <Button type="link">管理成员</Button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </div>
                <Pagination
                total={52}
                showTotal={(total) => `共 ${total} 条`}
                defaultPageSize={10}
                pageSizeOptions={[8,10,12,15]}
                defaultCurrent={1}
                />
            </div>
        </div>
    </>
}

export default React.memo(App);